body {
  background-color: #24058e;
}

.banner {
  width: 100%;

  img {
    width: 100%;
  }

}

.discount {
  width: 100%;
  height: auto;
  background: url('../images/discountBg1.png') no-repeat;
  background-size: 100%;

  .price {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .item {
      width: 31%;
      position: relative;

      img {
        width: 100%;
      }

      .money {
        position: absolute;
        left: 1.5rem;
        top: .5rem;
        font-size: 1rem;
        color: #fff;

        span {
          font-size: 3rem;
        }
      }

      .full {
        color: #d7d4d3;
        font-size: .6rem;
        position: absolute;
        left: 2.2rem;
        top: 4rem;
      }

      .get-btn {
        width: 3.5rem;
        text-align: center;
        background-color: #9272ff;
        box-shadow: 0px -2px 2px #ca56f7;
        border-radius: 100px;
        padding: .1rem .2rem;
        color: #fff;
        font-size: .6rem;
        position: absolute;
        left: 2.1rem;
        top: 5.2rem;
      }
    }
  }

  .gift {
    width: 100%;
    margin: 0 auto;
    text-align: center;

    img {
      width: 100%;
    }

    .line {
      width: 90%;
      height: 1px;
      background-color: #eee;
      margin: 1rem auto .3rem;
    }

    .give {
      width: 40%;
      border-radius: 100px;
      background-color: #f9f002;
      text-align: center;
      font-size: .7rem;
      font-weight: bold;
      color: #6c386e;
      letter-spacing: 2px;
      margin: 0 auto;
    }


  }

  .frame {
    width: 100%;
    margin-top: .5rem;
    position: relative;

    img {
      width: 100%;
    }

    .goods {
      width: 84%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      top: 2rem;
      left: 1.8rem;

      .item {
        width: 24%;
        background-color: #fff;
        border-radius: .5rem;
        padding: .5rem;

        img {
          width: 100%;
          margin-bottom: .5rem;
        }

        p {
          font-size: .6rem;
          text-align: center;
          color: #551a97;
          font-weight: bold;
        }
      }
    }
  }
}

.recommend {
  width: 100%;
  height: auto;
  background: url('../images/recommendBg.png') no-repeat;
  background-size: 100%;
  display: flex;
  flex-direction: column;

  .title {
    color: #fff;
    font-size: 2rem;
    text-align: center;
    margin-top: 2rem;
    letter-spacing: 1px;
  }

  .goods-box1 {
    width: 92%;
    background-color: #3268d6;
    margin: 0 auto;
    border-radius: 4px;
    padding: 1rem;

    .box-in {
      width: 100%;
      background-color: #fff;
      border-radius: 4px;
      position: relative;
      padding: 3rem .5rem;

      .tag {
        width: 16%;
        color: #fff;
        font-size: 1rem;
        background-color: #f9b002;
        text-align: center;
        padding: .2rem .5rem .5rem .5rem;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        position: absolute;
        top: 0;
        left: .5rem;
      }

      .goods {
        width: 100%;
        display: flex;
        // align-items: center;
        justify-content: space-between;

        img {
          width: 45%;
        }

        .text {
          width: 50%;

          .name {
            color: #46058e;
            font-size: 2rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .desc {
            font-size: .8rem;
            color: #ac8ecc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .price {
            font-size: 1.8rem;
            color: #f9b920;
          }

          .buy {
            width: 50%;
            color: #fff;
            font-size: 1rem;
            font-weight: bold;
            border-radius: 4px;
            background-color: #f9b002;
            text-align: center;
            letter-spacing: 1px;
          }
        }
      }
    }
  }

  .goods-box2 {
    width: 92%;
    background-color: #3268d6;
    margin: 0 auto;
    border-radius: 4px;
    padding: 1rem;
    margin-top: 1rem;

    .box-in {
      width: 100%;
      background-color: #fff;
      border-radius: 4px;
      position: relative;
      padding: 3rem .5rem;

      .tag {
        width: 16%;
        color: #fff;
        font-size: 1rem;
        background-color: #f9b002;
        text-align: center;
        padding: .2rem .5rem .5rem .5rem;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        position: absolute;
        top: 0;
        right: .5rem;
      }

      .goods {
        width: 100%;
        display: flex;
        // align-items: center;
        justify-content: space-between;

        img {
          width: 45%;
        }

        .text {
          width: 50%;

          .name {
            color: #46058e;
            font-size: 2rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .desc {
            font-size: .8rem;
            color: #ac8ecc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .price {
            font-size: 1.8rem;
            color: #f9b920;
          }

          .buy {
            width: 50%;
            color: #fff;
            font-size: 1rem;
            font-weight: bold;
            border-radius: 4px;
            background-color: #f9b002;
            text-align: center;
            letter-spacing: 1px;
          }
        }
      }
    }
  }
}

.products {
  width: 100%;
  height: auto;
  background: url('../images/recommendBg.png') no-repeat;
  background-size: 100%;
  display: flex;
  flex-direction: column;

  .title {
    color: #fff;
    font-size: 2rem;
    text-align: center;
    letter-spacing: 1px;
    margin-top: 2rem;
  }

  .box {
    width: 92%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    .sell {
      width: 49%;
      margin-top: 1rem;

      .top {
        width: 100%;
        padding: 1rem 1rem .2rem;
        background-color: #fff;
        border-radius: 10px 10px 0 0;

        img {
          width: 100%;
          margin-bottom: .5rem;
        }

        .desc {
          font-size: .8rem;
          color: #a584c7;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }


      .foot {
        width: 100%;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #3268d6;
        border-radius: 0 0 10px 10px;

        .price {
          display: flex;
          align-items: center;

          .left {
            font-size: .6rem;
            color: #fff;
  
            .origin {
              font-size: .5rem;
              span {
                text-decoration: line-through;
              }
            }
          }

          .right {
            font-size: 2rem;
            color: #f9b002;
            font-weight: bold;
            sup {
              font-size: .5rem;
              color: #fff;
            }
          }
        }

        .buy {
          width: 35%;
          font-size: .8rem;
          color: #fff;
          border-radius: 6px;
          background-color: #f9b920;
          text-align: center;
        }
      }
    }
  }
}

.footer{
  width: 100%;
  height: auto;
  background: url('../images/foot.png') no-repeat;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  .more {
    font-size: 1rem;
    color: #f6eb09;
    text-align: center;
    margin-top: 3rem;
  }

  .icon {
    text-align: center;
    img {
      width: 2rem;
    }
  }
}